<template>
	<view class="box_follow">
		<image :src="square_logo" class="logo"></image>
		<view class="tx1">{{ wechat_name?wechat_name:sitename }}</view>
		<view class="tx2">及时获取最新招聘岗位信息</view>
		<u-button class="follow_btn" type="primary" size="medium" shape="circle" :custom-style="customStyle" @click="showWeixinQrcode=true">关注</u-button>
		<!-- title="关注公众号" confirm-button-text="知道了" -->
		<u-modal v-model="showWeixinQrcode" @confirm="handleSave">
			<view class="dialog_wx_qr">
				<view class="tip orange">保存二维码图片，关注公众号</view>
				<view class="qr_img"><image :src="wechat_qrcode" ></image></view>
				<!-- <view class="tip_text" style="text-align:center;">长按图片识别关注公众号。</view> -->
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'Subscribe',
		data() {
			return {
				showWeixinQrcode: false,
				customStyle:{
					padding:'0 40rpx'
				}
			}
		},
		mounted() {},
		created() {},
		computed: {
			...mapState({
				square_logo: state => state.config.square_logo,
				wechat_name: state => state.config.wechat_name,
				sitename: state => state.config.sitename,
				wechat_qrcode: state => state.config.wechat_qrcode
			})
		},
		methods: {
			handleSave(){
				var _this = this
				uni.downloadFile({ //通过下载文件api 获取临时路径
					url:this.wechat_qrcode,
					success:(res)=>{
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({ // 保存到系统相册中 (网络地址不支持)
								filePath:res.tempFilePath,//传入临时地址
								success() {
									uni.vibrateShort({
										success(){
											_this.$refs.uToast.show({
												title: '保存成功',
												type:'success',
												icon:false
											 })
										}
									})
								},
								fail() {
									_this.$refs.uToast.show({
										title: '保存失败',
										type:'error',
										icon:false
									 })
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_follow {
		.follow_btn {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
		}

		.tx2 {
			max-width: 420rpx;
			font-size: 26rpx;
			color: #999999;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.tx1 {
			margin-bottom: 12rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			max-width: 420rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.logo {
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			max-width: 90rpx;
			max-height: 90rpx;
			border: 0;
		}

		position: relative;
		width: 100%;
		background-color: #ffffff;
		padding: 27rpx 0 30rpx 146rpx;
	}
</style>
